<template>
    <a-drawer
        :open="open"
        title="播放列表"
        placement="right"
        :width="400"
        @update:open="(val) => emit('update:open', val)"
    >
        <div>
            <div
                v-for="(song, index) in songs"
                :key="song.id"
                class="flex items-center gap-3 p-3 border-b border-gray-100 cursor-pointer transition-colors hover:bg-gray-50"
                :class="{ 'bg-blue-50': currentSongId === song.id }"
                @click="emit('play', song)"
            >
                <span class="w-8 text-gray-500 text-sm">{{ index + 1 }}</span>
                <span
                    class="flex-1 font-medium truncate"
                    :class="currentSongId === song.id ? 'text-blue-500' : 'text-gray-800'"
                >
                    {{ song.name }}
                </span>
                <span class="text-gray-500 text-xs">{{ song.artist }}</span>
            </div>
        </div>
    </a-drawer>
</template>

<script lang="ts" setup>
import type { Song } from './types'

// Props
defineProps<{
    open: boolean
    songs: Song[]
    currentSongId?: number
}>()

// Emits
const emit = defineEmits<{
    (e: 'update:open', value: boolean): void
    (e: 'play', song: Song): void
}>()
</script>
